<template>
    <div class="tabbar-item" @click="itemClick">
        <!-- <div v-if="!isActive" class="tabbar-item-icon"> -->
        <div v-show="!isActive" class="tabbar-item-icon">
            <slot name="item-icon"></slot>
        </div>
        <!-- <div v-else class="tabbar-item-icon"> -->
        <div v-show="isActive" class="tabbar-item-icon">
            <slot name="item-icon-active"></slot>
        </div>
        <div class="tabbar-item-text" :style="activeStyle">
            <slot name="item-text"></slot>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
        }
    },
    props: {
        path: {
            type: String,
            required: true
        },
        activeColor: {
            type: String,
            default: '#41b883'
        }
    },
    computed: {
        isActive() {
            return this.$route.path.indexOf(this.path) !== -1;
        },
        activeStyle() {
            return this.$route.path.indexOf(this.path) !== -1 ? {
                color: this.activeColor
            }:{};
        }
    },
    methods: {
        itemClick() {
            this.$router.push(this.path);
        }
    } 
}
</script>

<style>
.tabbar-item {
    flex: 1;
    /* text-align: center; */
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    align-items: center;
}
.tabbar-item-icon img{
    height: 27px;
}
.tabbar-item-text {
    font-size: 12px;
}
</style>